<template>
  <div>
    <el-page-header style="margin-top: 10px" @back="goBack" content="医院信息"></el-page-header>
    <div style="padding-top: 20px; padding-bottom: 20px">
<!--  医院介绍-->
      <div style="background-color: white;height: 180px; margin-bottom: 10px">
      <div style="float: left;margin-top: 20px; margin-left: 20px">
        <img :src="hospital.picture" width="180" height="130" class="head_pic"/>
      </div>
      <div class="box-card" style="padding-left: 20px; padding-top: 18px; float: left;">
        <span style="font-size: 20px">{{ hospital.name }}</span><el-tag type="warning" color="#FFEED1" size="5px" style="color: #ff9900;font-size: 10px;margin-left: 20px">{{ hospital.grade }}</el-tag><br />
        <span style="color: dimgrey">地址：</span><span style="padding-top: 10px">{{ hospital.address }}</span><br />
        <div style="padding-top: 10px" class="text-wrapper">
          <span style="color: dimgrey">电话：</span><span style="padding-top: 10px">{{ hospital.phone }}</span><br />
        </div>
        <div class="text-wrapper">
          <p style="width: 900px;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow: hidden;
          "><span style="color: dimgrey">简介：</span>{{ hospital.outline }}</p><br />
        </div>
      </div>
      </div>
    </div>

  <!--    医院科室查询-->

    <div style="border: 1px solid beige; border-radius: 10px; margin-top: 10px; background-color: white">
      <h3 style="padding-left: 10px">全部科室</h3>
      <el-empty description="暂无科室" v-if="departments.length === 0"></el-empty>
      <el-row :gutter="2" v-else>
        <el-col :span="6" v-for="dep in departments" :key="dep.id">
            <div style="padding: 14px;float: left;">
              <el-link type="primary" @click="$router.push({path: '/front/DepInfo',query:{hosId: hospital.id,depId: dep.id}})">{{dep.name }}</el-link>
              <span class="s1">( {{dep.num}}人 )</span>
              <br/>
            </div>
        </el-col>
      </el-row>
    </div>

<!--    医院评论-->
    <div style="border: 1px solid beige; border-radius: 10px; margin-top: 10px; background-color: white">
      <h3 style="padding-left: 10px">医院评论</h3>
      <!--    <img :src="appraises.user.photo">-->
      <el-empty description="暂无评论" v-if="total === 0"></el-empty>
      <div v-else>
        <div style="margin-bottom: 20px; margin-left: 10px">
          <span style="color: gray; font-size: 10px; ">共 {{total}} 条评论</span>
        </div>
        <el-table :data="tableData" border stripe header-cell-class-name="headerBg">
          <el-table-column prop="user.photo" width="130px">
            <template slot-scope="scope">
              　<img :src="scope.row.user.photo" width="80" height="80" class="head_pic" style="border-radius: 50%;"/>
            </template>
          </el-table-column>
          <el-table-column prop="user.nickname" label="用户" width="100"></el-table-column>
          <el-table-column prop="physician.nickname" label="医生" width="100"></el-table-column>
          <el-table-column prop="content" label="评论" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="score" label="评分" width="350px">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.score"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
                :max = 10>
              </el-rate>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HosInfo",
  data() {
    return {
      hospital: {},
      departments: {},
      tableData: {},
      total: 0
    }
  },
  created() {
    this.load()
    this.findPhy()
  },
  methods: {
    load() {
      //console.log("医院")
      //console.log(this.$route.query)
      this.request.post("/hospital/findById?id=" + this.$route.query.hosId ).then(res => {
        //console.log(res)
        this.hospital = res
        this.findAppraise()
      })
    },
    findPhy(){
      this.request.get("/physician/findDepCount" , {
        params:{
          id: this.$route.query.hosId
        }
      }).then(res => {
        console.log("科室信息")
        console.log(res)
        this.departments = res
      })
    },
    findAppraise(){
      console.log( "医院" + this.hospital.id)
      this.request.post("/appraise/HosAppraise?id="+ this.hospital.id).then(res => {
        console.log(res)
        this.tableData = res.data
        this.total = res.total
      })
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>
